<template>
  <div class="doughnut-echart">
    <base-echarts :option="option" chartHeight="160px" />
  </div>
</template>

<script setup lang="ts">
/*
  xxx-echart 负责将options配置做单独组件的封装
*/
import { computed } from "vue"
import BaseEcharts from "./Base-echarts.vue"
import type { EChartsOption } from "echarts"
import type { IEchartValueType } from "../types/index"

// prop传入图表数据
interface IProps {
  title: string
  data: IEchartValueType[]
}
const props = defineProps<IProps>()

// data由props中的数据传入,通过计算属性重新计算出option
const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      // item 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      trigger: "item"
    },
    // 调整图例
    legend: {
      orient: "vertical",
      left: "15%",
      bottom: "8%",
      //   图例颜色
      textStyle: {
        color: "#fff"
      }
    },
    series: [
      {
        name: props.title,
        type: "pie",
        radius: ["38%", "72%"],
        left: "30%",
        // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
        avoidLabelOverlap: false,
        // 是否启用图例 hover 时的联动高亮。
        legendHoverLink: true,
        // 图形样式。
        itemStyle: {
          // 边框圆角
          borderRadius: 10,
          // 边框颜色
          borderColor: "black",
          // 边框宽度
          borderWidth: 1
        },
        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
        label: {
          show: false,
          position: "center"
        },
        // 高亮状态的扇区和标签样式。
        emphasis: {
          // 高亮状态才显示标签
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: props.data
      }
    ]
  }
})
</script>

<style lang="less" scoped></style>
